<template>
  <div class="staff-card" :class="cardSize">
    <div class="card-container" :class="{ 'with-shadow': shadow }">
      <!-- 头像区域 -->
      <div class="avatar-container">
        <img
          :src="avatar && avatar != '' ? getFullUrl(avatar) : userAvatar"
          alt="工作人员头像"
          class="avatar"
          :class="{ bordered: avatarBorder }"
        />
        <div
          v-if="statusBadge"
          class="status-badge"
          :style="{ backgroundColor: statusColor }"
        >
          {{ statusBadge }}
        </div>
      </div>
      <!-- 信息区域 -->
      <div class="info-container">
        <div class="name-container">
          <h3 class="name">{{ name || "未设置姓名" }}</h3>
          <span v-if="position" class="position">{{ position }}</span>
        </div>

        <div class="contact-info">
          <div class="phone" v-if="phone">
            <IconifyIconOffline :icon="Phone" :size="16" />
            <span>{{ formatPhone(phone) }}</span>
          </div>

          <div class="email" v-if="email">
            <i class="fa fa-envelope"></i>
            <span>{{ email }}</span>
          </div>

          <div class="other-info" v-if="otherInfo">
            <i class="fa fa-info-circle"></i>
            <span>{{ otherInfo }}</span>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="actions" v-if="showActions">
          <button
            v-for="(action, index) in actions"
            :key="index"
            class="action-btn"
            :class="action.className || 'btn-primary'"
            @click="action.handler"
          >
            <i :class="action.icon || 'fa fa-check'"></i>
            {{ action.label || "操作" }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, h } from "vue";
import { getFullUrl } from "@/utils/auth";
import Phone from "~icons/ep/phone-filled";
import userAvatar from "@/assets/user.png";
const props = defineProps<{
  // 基础信息
  avatar: string;
  name: string;
  phone: string;
  email?: string;
  position?: string;
  otherInfo?: string;

  // 样式配置
  shadow?: boolean;
  size?: "small" | "medium" | "large";
  avatarBorder?: boolean;

  // 状态徽章
  statusBadge?: string;
  statusColor?: string;

  // 操作按钮
  showActions?: boolean;
  actions?: Array<{
    label: string;
    icon: string;
    handler: () => void;
    className?: string;
  }>;
}>();

// 计算属性
const cardSize = computed(() => {
  return props.size ? `size-${props.size}` : "size-medium";
});

// 格式化手机号
const formatPhone = (phone: string) => {
  if (!phone) return "";
  return phone.replace(/(\d{3})(\d{4})(\d{4})/, "$1 $2 $3");
};
</script>

<style scoped>
.staff-card {
  font-family: "Inter", sans-serif;
}

.card-container {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  background-color: white;
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
  align-items: center;
}

.card-container.with-shadow {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.card-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.avatar-container {
  position: relative;
  padding: 16px;
  display: flex;
  align-items: center;
  height: 50px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.avatar:hover {
  transform: scale(1.08);
}

.avatar.bordered {
  border: 3px solid #4285f4;
  padding: 2px;
}

.status-badge {
  position: absolute;
  bottom: -3px;
  right: 12px;
  background-color: #0f9d58;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 12px;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 1;
}

.info-container {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.name-container {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}

.name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #333;
  margin: 0;
  margin-bottom: 5px;
}

.position {
  margin-left: 10px;
  background-color: #f0f0f0;
  color: #666;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
}

.contact-info {
  display: flex;
  gap: 6px;
  color: #666;
}

.contact-info > div {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.contact-info i {
  width: 20px;
  color: #4285f4;
  margin-right: 8px;
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  transform: translateY(-1px);
}

span {
  line-height: 1;
}

.btn-primary {
  background-color: #4285f4;
  color: white;
}

.btn-primary:hover {
  background-color: #3367d6;
}

.btn-secondary {
  background-color: #f0f0f0;
  color: #333;
}

.btn-secondary:hover {
  background-color: #e0e0e0;
}

/* 尺寸变体 */
.size-small .avatar {
  width: 60px;
  height: 60px;
}

.size-small .name {
  font-size: 16px;
}

.size-small .contact-info > div {
  font-size: 12px;
}

.size-large .avatar {
  width: 100px;
  height: 100px;
}

.size-large .name {
  font-size: 20px;
}

.size-large .contact-info > div {
  font-size: 16px;
}
</style>
